<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端适配问题总结</title>
</head>
<body>
    
    1.rem适配
        1)淘宝适配方案 库：lib-flexible  参数:
            /*no*/ —— 不转rem
            /*px*/ —— 根据当前dpr转换 比如字体大小
            默认 按比例转换 可能会有 精度问题
        2)雪碧图最好不要在rem下使用，安卓机下有精度问题

    2.固定头部，底部最好使用fixed定位布局，不要用flex布局，因为flex布局在滚动中间区域时，碰触到底部或顶部区域会造成页面假死状态。
    
    3. iphoneX等机型底部指示调兼容问题 
     <meta name="viewport" content="viewport-fit=cover"> 适配
     底部父级元素 加样式 
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);

    4.滚动元素加 -webkit-overflow-scrolling:touch; 提高ios流畅度
</body>
</html>